<template>
	<el-dialog :visible.sync="dialogVisible" title="新建账套企业" width="1000px" :close-on-click-modal="false" v-drag2anywhere>
		<div>
			<el-form ref="form" :model="formData" :rules="rules" label-width="100px">
			  <el-row :gutter="20">
          <el-col :span="12">
              <el-form-item label="企业名称:" prop="name">
                <el-input v-model="formData.name" placeholder="北京xxx有限公司" clearable></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业性质:"  prop="type">
              <el-select v-model="formData.type" placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in types" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纳税识别码:" prop="socialcode">
              <el-input v-model="formData.socialcode" placeholder="纳税识别码" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
             <el-form-item label="法人:"  prop="legalman">
               <el-input v-model="formData.legalman" placeholder="法人姓名" clearable></el-input>
             </el-form-item>
          </el-col>

          <el-col :span="12">
             <el-form-item label="注册资金:"  prop="regcapital">
               <el-input v-model="formData.regcapital" placeholder="例如: 100万" clearable></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话:" prop="telephone">
              <el-input v-model="formData.telephone" placeholder="010-123456789"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="注册地址:"  prop="address">
              <el-input v-model="formData.address" placeholder="例如: 100万"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="启用状态">
              <el-switch v-model="formData.enabled" active-value="1" inactive-value="0"></el-switch>
            </el-form-item>
          </el-col>
          </el-row>
          <el-row>
			    <el-col :span="12">
			      <el-form-item label="开户行名称:"  prop="bankname">
			        <el-input v-model="formData.bankname" placeholder="中国银行中关村五道口支行"></el-input>
			      </el-form-item>
			    </el-col>
			    <el-col :span="12">
			      <el-form-item label="银行账号:"  prop="cardnumber">
			        <el-input v-model="formData.cardnumber" placeholder="62222132132"></el-input>
			      </el-form-item>
			    </el-col>
			    <el-col :span="24">
			      <el-form-item label="简介:"  prop="intro">
			        <el-input type="textarea" :rows="3" v-model="formData.intro" maxlength="500" show-word-limit
			          placeholder="企业简介"></el-input>
			      </el-form-item>
			    </el-col>
			    <el-col :span="6">
			      <el-form-item label="京东点位:"  prop="jdrate">
			        <el-input v-model="formData.jdrate" style="width: 80px;">
			          <span slot="suffix">%</span>
			        </el-input>
			      </el-form-item>
			    </el-col>
			    <el-col :span="6">
			      <el-form-item label="军网点位:"  prop="jwrate">
			        <el-input v-model="formData.jwrate" style="width: 80px;">
			          <span slot="suffix">%</span>
			        </el-input>
			      </el-form-item>
			    </el-col>
			    <el-col :span="6">
			      <el-form-item label="政采云点位:"  prop="zcrate">
			        <el-input v-model="formData.zcrate" style="width: 80px;">
			          <span slot="suffix">%</span>
			        </el-input>
			      </el-form-item>
			    </el-col>
          <el-col :span="6">
            <el-form-item label="企业点位:"  prop="qyrate">
              <el-input v-model="formData.qyrate" style="width: 80px;">
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
			    <el-col>
			      <el-form-item label="点位说明:" >
			        <el-input type="textarea" :rows="3" show-word-limit maxlength="255"
			          v-model="formData.ratememo"></el-input>
			        <span style="color:#ff0000">(合作商可见)</span>
			      </el-form-item>
			    </el-col>

			    <el-col >
			      <el-form-item label="备注:" >
			        <el-input type="textarea" v-model="formData.memo" placeholder="备注信息" rows="3" maxlength="255"
			          show-word-limit></el-input>
			        <span style="color:#ff0000">(仅管理端可见)</span>
			      </el-form-item>
			    </el-col>
			  </el-row>
			</el-form>

		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false" size="medium">取 消</el-button>
			<el-button type="primary" size="medium" @click="handleSave">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				index: -1,
				formData: {
					type:  1,
					name: "",
          enabled:"1",
					legalman: '',
					regcapital: '',
					socialcode: '',
					address: '',
					telephone: '',
					bankname: '',
					cardnumber: '',
					licensedate: null,
					longdate: false,
					intro: '',
					memo: '',
					jdrate: 12,
					jwrate: 8,
          zcrate:5,
          qyrate:5,
          ratememo:''
				},
				dialogVisible: true,
				types: [{
						label: "一般纳税人",
						value: 1
					}, {
						label: "小规模",
						value: 2
					},
					{
						label: "个体户",
						value: 3
					},
          {
            label:"自然人",
            value:4
          }
				],
				rules: {
					type: [{
						required: true,
						"message": "企业性质不能为空",
						trigger: blur
					}],
					name: [{
						required: true,
						"message": "企业名称不能为空!",
						trigger: blur
					}],
					jdrate: [{
						required: true,
						"message": "京东平台点位不能为空!",
						trigger: blur
					}],
          jwrate: [{
          	required: true,
          	"message": "自行采购平台点位不为空!",
          	trigger: blur
          }],
          zcrate: [{
          	required: true,
          	"message": "政采云平台点位填不为空！",
          	trigger: blur
          }],
          qyrate: [{
          	required: true,
          	"message": "企业订单点位不为空!",
          	trigger: blur
          }],
				}
			}
		},
		methods: {
			init: function() {
				this.formData={
          	type:  1,
          	name: "",
            enabled:"1",
          	legalman: '',
          	regcapital: '',
          	socialcode: '',
          	address: '',
          	telephone: '',
          	bankname: '',
          	cardnumber: '',
          	licensedate: null,
          	longdate: false,
          	intro: '',
          	memo: '',
          	jdrate: 12,
          	jwrate: 8,
            zcrate:5,
            qyrate:5,
            ratememo:''
        };
				this.formData.type = parseInt(this.formData.type);
			},
			handlelongdate: function(val) {
				this.formData.longdate = val;
			},
			handleSave: function() {
				this.$refs.form.validate((ok) => {
					if (ok) {
						let params = {
							id: this.formData.id,
							type: this.formData.type,
							name: this.formData.name,
              enabled:this.formData.enabled,
							regcapital: this.formData.regcapital,
							socialcode: this.formData.socialcode,
							legalman: this.formData.legalman,
							address: this.formData.address,
 							telephone: this.formData.telephone,
							bankname: this.formData.bankname,
							cardnumber: this.formData.cardnumber,
							intro: this.formData.intro,
							memo: this.formData.memo,
							jdrate: this.formData.jdrate,
							jwrate: this.formData.jwrate,
							zcrate: this.formData.zcrate,
              qyrate:this.formData.qyrate,
							ratememo: this.formData.ratememo
						};

						this.axios.post("/api/admin/account/add", params).then((res) => {
							if (res.status == 200 && res.data.code == 0) {
								this.$message.success({
									message: res.data.msg,
									duration: 1000
								});
								this.dialogVisible = false;
								this.$emit("closeHandler", this.index, params);
							} else {
								this.$alert(res.data.msg, "提示", {
									type: 'error'
								});
							}
							console.log(res);
						})

						return true;
					}
					return false;
				})
			}
		}
	}
</script>

<style scoped>

</style>
